<template>
  <div>
<!--    一个navbar-->
    <van-nav-bar
      title="app订票"
      @click-left="handleleft"
      @click-right="handleright"
    >
      <template #left>
       {{cityName}}<van-icon name="arrow-down" color="black"/>
      </template>
      <template #right>
        <van-icon name="search" size="23" color="black"/>
      </template>
    </van-nav-bar>
  <div class="cinema" :style="{height:height}">
   <van-list>
      <van-cell v-for="data in cinemalist" :key="data.cinemaId" style="list-style:none!important">
        <div>{{data.name}}</div>
        <div class="address">{{data.address}}</div>
      </van-cell>
   </van-list>
  </div>
  </div>
</template>
<script>

import BetterScroll from 'better-scroll'
import Vue from 'vue'
import { NavBar, Icon, Cell, List } from 'vant'
import { mapState, mapMutations, mapActions } from 'vuex'

Vue.use(NavBar).use(Icon).use(Cell).use(List)
export default {
  data () {
    return {
      height: 0
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId', 'cityName']),
    ...mapState('CinemaModule', ['cinemalist'])
  },
  methods: {
    ...mapMutations('CinemaModule', ['clearCinemaList']),
    ...mapActions('CinemaModule', ['cinemaGetMessage']),
    handleleft () {
      // 在这之前，我们将cinemalist内容清空，然后重新请求关于位置的电影院信息
      // this.$store.commit('clearCinemaList')
      this.clearCinemaList()
      this.$router.push('/city')
    },
    handleright () {
      this.$router.push('/cinema/search')
    }
  },
  mounted () {
    this.height = document.documentElement.clientHeight - 100 + 'px'
    // 在这里使用异步的ajax请求，当再次请求时我们cong缓存中获取
    if (this.cinemalist.length === 0) {
      // 走vuex的action
      this.cinemaGetMessage(this.cityId).then(res => {
        this.$nextTick(() => {
          new BetterScroll('.cinema', {
            scrollbar: true
          })
        })
      })
    } else {
      console.log('缓存')
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          scrollbar: true
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
  ul{
     padding-left: 0px;
      li{
        margin: 5px;
        padding-left: 5px;
        .address{
          font-size: 12px;
          color: gray;
        }
      }

   }
</style>
<style scoped lang="scss">
 .cinema{
   height: 500px;
   overflow: hidden;
   position: relative;  // 修正滚动条的位置
 }
</style>
